﻿
@{
    Layout = "/Areas/Adm/Views/Shared/_Layout_Body.cshtml";
}
@section StylesBefore{
    @Styles.Render("~/Template/Admin/jucheap/Css/DataTable")
}
@section Scripts{
    @Scripts.Render("~/JS/Admin/jucheap/DataTable")

    <script>
        var grid = null;
        var mygrid = null;

        function reload() {
            grid.reload();
        }

        function authenRole(action) {
            var url = '@Url.Action("AuthenRole", ViewContext.RouteData.Values)';
            var rows = grid.getSelectedRows();
            if (action == "unauthen") {
                url = '@Url.Action("UnAuthenRole", ViewContext.RouteData.Values)';
                rows = mygrid.getSelectedRows();
            }
            var actionName = action == "unauthen" ? "取消" : "授权";
            
            if (rows != null && rows.length > 0) {
                $.ajax({
                    url: url,
                    type: 'post',
                    data: JSON.stringify(rows),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function(res) {
                        if (res.flag) {
                            parent.layer.alert(actionName + "成功");
                            grid.reload();
                            mygrid.reload();
                        } else {
                            parent.layer.alert(actionName + "失败:" + res.msg);
                        }
                    }
                });
            } else {
                parent.layer.alert("请选择要" + actionName + "的角色");
            }
        }

        $(function() {
            var cols = [
                { data: "Id", name: "Id", orderable: false },
                { data: "Name", name: "Name", orderable: true }
            ];
            var config = {
                id: "table_server",
                url: "@Url.Action("GetNotMyRoles", @ViewContext.RouteData.Values)",
                columns: cols,
                order: [[1, "desc"]]
            };
            grid = new jucheap.grid(config);
            grid.load();

            $(".box-refresh").click(function() {
                grid.reload();
            });

            var myconfig = {
                id: "table_server_my",
                url: "@Url.Action("GetMyRoles", @ViewContext.RouteData.Values)",
                columns: cols,
                order: [[1, "desc"]],
                canFilter: false
            };
            mygrid = new jucheap.grid(myconfig);
            mygrid.load();
        });
    </script>
}

<div class="row">
    <div class="col-md-5">
        <section class="panel">
            <header class="panel-heading" style="margin-bottom: 10px;">
               我拥有的角色
                <span class="tools pull-right">
                    <a class="fa fa-repeat box-refresh" href="javascript:;"></a>
                    <a class="t-close fa fa-times" href="javascript:;"></a>
                </span>
            </header>
            <table id="table_server_my" class="table responsive-data-table data-table table-hover">
                <thead>
                    <tr>
                        <th style="width: 40px;">
                            选择
                        </th>
                        <th>
                            角色名称
                        </th>
                    </tr>
                </thead>
            </table>
        </section>
    </div>

    <div class="col-md-2 text-center">
        <p>
            <button class="btn btn-primary" onclick="authenRole('authen')">&lt;&lt;授权</button>
        </p>
        <p>
            <button class="btn btn-success" onclick="authenRole('unauthen')">取消&gt;&gt;</button>
        </p>
    </div>

    <div class="col-md-5">
        <div class="hidden" id="hidden_filter">
            @* 把需要搜索的条件放到hidden里面，在table格式化完成的时候直接调用$.html()赋值，免去了在js拼接标签的麻烦 *@
            <div class="row" style="margin-right:0;">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="keywords">关键字</label>
                        <input type="text" class="form-control" id="keywords" name="keywords" placeholder="角色名称" maxlength="20" />
                    </div>
                    <button type="button" class="btn btn-success" name="go_search">搜索</button>
                </form>
            </div>
        </div>
        <section class="panel">
            <header class="panel-heading" style="margin-bottom: 10px;">
                尚未拥有的角色
                <span class="tools pull-right">
                    <a class="fa fa-repeat box-refresh" href="javascript:;"></a>
                    <a class="t-close fa fa-times" href="javascript:;"></a>
                </span>
            </header>
            <table id="table_server" class="table responsive-data-table data-table table-hover">
                <thead>
                    <tr>
                        <th style="width: 40px;">
                            选择
                        </th>
                        <th>
                            角色名称
                        </th>
                    </tr>
                </thead>
            </table>
        </section>
    </div>
</div>

